<template>
  <div class="save">
    <!-- 表头 -->
    <mheader></mheader>
    <div class="wrap">
      <div class="gridTitle">补充材料：</div>
      <el-row>
        <el-col :span="8">
          <div><span>姓名：</span>{{ Mdata.stuName }}</div>
        </el-col>
        <el-col :span="8">
          <div><span>性别：</span>{{sex[Mdata.sex]}}</div>
        </el-col>
        <el-col :span="8">
          <div><span>历史工单：</span>{{ Mdata.historyApplyList }}</div>
        </el-col>
      </el-row>
      <div class="gridTitle">提交员信息：</div>
      <el-row>
        <el-col :span="12">
          <div><span>姓名：</span>{{ Mdata.supplierName }}</div>
        </el-col>
        <el-col :span="12">
          <div><span>事业部：</span>{{ Mdata.supplierDepartmentName }}</div>
        </el-col>
        <el-col :span="12">
          <div><span>邮箱：</span>{{ Mdata.supplierEmail }}@sunland.com</div>
        </el-col>
        <el-col :span="12">
          <div><span>手机号：</span>{{ Mdata.supplierTel }}</div>
        </el-col>
      </el-row>
      <div class="gridTitle">补充材料：</div>
      <el-row>
        <div v-if="Mdata.applyTable.length">
          <el-col :span="24">
            <div><span>申请表：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.applyTable" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.chsiCnEdu.length">
          <el-col :span="24">
            <div><span>学信网中文学历认证：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.chsiCnEdu" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.chsiEnEdu.length">
          <el-col :span="24">
            <div><span>学信网英文学历认证：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.chsiEnEdu" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.pasport.length">
          <el-col :span="24">
            <div><span>护照扫描件：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.pasport" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.idCard.length">
          <el-col :span="24">
            <div><span>身份证正反扫描件：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.idCard" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.identificationPic.length">
          <el-col :span="24">
            <div><span>2寸证件照：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.identificationPic" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.workProve.length">
          <el-col :span="24">
            <div><span>工作证明（盖公章）：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.workProve" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.vitae.length">
          <el-col :span="24">
            <div><span>个人简历：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.vitae" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.degreeIdent.length">
          <el-col :span="24">
            <div><span>学位网学位认证：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.degreeIdent" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.recommendation.length">
          <el-col :span="24">
            <div><span>推荐信：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.recommendation" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.enVideo.length">
          <el-col :span="24">
            <div><span>90秒英文视频：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.enVideo" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.statement.length">
          <el-col :span="24">
            <div><span>中文或英文个人陈述：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.statement" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.fisrtStageDegree.length">
          <el-col :span="24">
            <div><span>学位证1：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.fisrtStageDegree" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.secondStageDegree.length">
          <el-col :span="24">
            <div><span>学位证2：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.secondStageDegree" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.thirdStageDegree.length">
          <el-col :span="24">
            <div><span>学位证3：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.thirdStageDegree" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.fisrtStageDiploma.length">
          <el-col :span="24">
            <div><span>毕业证1：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.fisrtStageDiploma" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.secondStageDiploma.length">
          <el-col :span="24">
            <div><span>毕业证2：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.secondStageDiploma" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.thirdStageDiploma.length">
          <el-col :span="24">
            <div><span>毕业证3：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.thirdStageDiploma" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.fisrtStageReport.length">
          <el-col :span="24">
            <div><span>成绩单1：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.fisrtStageReport" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.secondStageReport.length">
          <el-col :span="24">
            <div><span>成绩单2：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.secondStageReport" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.thirdStageReport.length">
          <el-col :span="24">
            <div><span>成绩单3：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.thirdStageReport" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
        <div v-if="Mdata.scoreCard.length">
          <el-col :span="24">
            <div><span>最高学历成绩单认证：</span></div>
          </el-col>
          <el-col :span="24">
            <div class="addStuff"><img v-for="(item, index) in Mdata.scoreCard" :src="item | imageOrPdf" :key="index" alt="" @click="difference(item)"></div>
          </el-col>
        </div>
      </el-row>
      <div class="wrapPadding">
        <div class="time"><i class="el-icon-time"></i> 信息有效期：<b>{{time}}</b></div>
        <div class="wrapPadding">
          <el-button @click="reEdit">修改信息</el-button>
          <el-button type="primary" @click="submit" :disabled=submitDisable>确认上传</el-button>
        </div>
      </div>
      <!-- 图片预览 -->
      <el-dialog :visible.sync="pictureVisible">
        <img :src="pictureVisibleSrc" alt="">
      </el-dialog>
      <!-- 视频播放 -->
      <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="false" width="80%">
        <video-player
          ref="videoPlayer"
          :playsinline="false"
          :options="videoOption"
          class="vjs-custom-skin"/>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { saveAdditionalMaterial } from '../api/additional'
import mheader from '@/components/mheader'
export default {
  name: 'addPreview',
  data () {
    return {
      pictureVisible: false,
      pictureVisibleSrc: '',
      dialogVisible: false,
      time: '',
      deltaTime: 30 * 60,
      Mdata: {},
      submitDisable: false,
      timer: '',
      sex: {
        1: '女',
        2: '男'
      },
      videoOption: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        },
        sources: [{
          type: 'video/mp4',
          src: '' // url地址
        }]
      }
    }
  },
  components: {
    mheader
  },
  filters: {
    imageOrPdf (value) {
      if (!value) return ''
      if (value.includes('pdf')) {
        return 'https://xszx-test-1251987637.cosbj.myqcloud.com/images/pdf.png'
      } else if (value.includes('mp4') || value.includes('avi') || value.includes('mkv')) {
        return 'https://xszx-test-1251987637.cosbj.myqcloud.com/images/1551783178857WechatIMG386.jpeg'
      } else if (value.includes('docx')) {
        return 'https://xszx-test-1251987637.cosbj.myqcloud.com/images/1551851063897timg.jpg'
      }
      return value
    }
  },
  methods: {
    difference (src) {
      console.log(src)
      if (src.includes('pdf')) {
        this.openPdf(src)
      } else if (src.includes('mp4') || src.includes('avi') || src.includes('mkv')) {
        this.authVideo(src)
      } else if (src.includes('docx')) {
        this.openDocx(src)
      } else {
        this.prviewPicture(src)
      }
    },
    openPdf (src) {
      window.open(src)
    },
    authVideo (item) {
      this.videoOption.sources[0].src = item
      this.dialogVisible = true
    },
    openDocx (src) {
      window.location.href = src
    },
    prviewPicture (src) {
      this.pictureVisibleSrc = src
      this.pictureVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogVisible = false
          this.player.pause()
          done()
        })
        .catch(_ => {})
    },
    reEdit () {
      this.$router.go(-1)
    },
    initTime () {
      if (this.deltaTime <= 0) {
        this.submitDisable = true
        clearInterval(this.timer)
        return
      }
      this.deltaTime--
      let mm = Math.floor(this.deltaTime / 60)
      let ss = Math.floor(this.deltaTime % 60)
      if (mm < 10) mm = '0' + mm
      if (ss < 10) ss = '0' + ss
      if (this.deltaTime <= 0) { this.time = '00:00:00' }
      this.time = '00:' + mm + ':' + ss
    },
    async submit () {
      let submitData = JSON.parse(JSON.stringify(this.Mdata))
      delete submitData.historyApplyList
      let { applyTable, chsiCnEdu, chsiEnEdu, pasport, idCard, identificationPic, workProve, vitae, degreeIdent, recommendation, enVideo, statement, fisrtStageDegree, secondStageDegree, thirdStageDegree, fisrtStageDiploma, secondStageDiploma, thirdStageDiploma, fisrtStageReport, secondStageReport, thirdStageReport, scoreCard } = submitData
      let add = [applyTable, chsiCnEdu, chsiEnEdu, pasport, idCard, identificationPic, workProve, vitae, degreeIdent, recommendation, enVideo, statement, fisrtStageDegree, secondStageDegree, thirdStageDegree, fisrtStageDiploma, secondStageDiploma, thirdStageDiploma, fisrtStageReport, secondStageReport, thirdStageReport, scoreCard]
      let addName = ['applyTable', 'chsiCnEdu', 'chsiEnEdu', 'pasport', 'idCard', 'identificationPic', 'workProve', 'vitae', 'degreeIdent', 'recommendation', 'enVideo', 'statement', 'fisrtStageDegree', 'secondStageDegree', 'thirdStageDegree', 'fisrtStageDiploma', 'secondStageDiploma', 'thirdStageDiploma', 'fisrtStageReport', 'secondStageReport', 'thirdStageReport', 'scoreCard']
      add.forEach((element, index) => {
        submitData[addName[index]] = element.join(',')
      })
      let { data: { code, id } } = await saveAdditionalMaterial(submitData)
      if (code !== 0) { // 失败
        this.$confirm('请重新提交数据！', '提交失败', {
          confirmButtonText: '重新填写',
          showCancelButton: false,
          closeOnPressEscape: false,
          type: 'error',
          center: true
        }).then(() => {
          sessionStorage.removeItem('formMsg')
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        })
      } else {
        this.$confirm(`补充材料工单号${id}`, '提交成功', {
          confirmButtonText: '继续提交',
          showCancelButton: false,
          closeOnPressEscape: false,
          type: 'success',
          center: true
        }).then(() => {
          sessionStorage.removeItem('formMsg')
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        })
      }
    }
  },
  async created () {
    this.timer = setInterval(() => {
      this.initTime()
    }, 1000)
    this.Mdata = JSON.parse(sessionStorage.getItem('addPreview'))
    if (!JSON.parse(sessionStorage.getItem('addPreview'))) {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
  .wrap{
    padding: 0 100px;
    margin: 0 auto;
    .el-row {
      line-height: 40px;
      padding: 5px 48px;
      line-height: 30px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 5px;
      .nav{
        font-size: 20px;
        font-weight: bold;
      }
      .mar_top{
        margin-top: 20px;
      }
      .addStuff{
        padding-left: 100px;
        img{
          margin: 0 10px;
          width: 100px;
          height: 100px;
        }
      }
    }
    .el-dialog{
      img{
        display: block;
        margin: 0 auto;
        width: 90%;
      }
    }
    .gridTitle{
      margin-top: 20px;
      font-size: 20px;
      line-height: 40px;
    }
    .time {
      color: #FF2352;
    }
  }
</style>
